'use client'

import { useState } from "react"
import { SerializedFinanceRecord } from "@/types"
import { IncomeExpenseDetails } from "./income-expense-details"

interface ReportsListProps {
  incomeRecords: SerializedFinanceRecord[]
  expenseRecords: SerializedFinanceRecord[]
}

export function ReportsList({ incomeRecords, expenseRecords }: ReportsListProps) {
  const totalIncome = incomeRecords.reduce((sum, record) => sum + parseFloat(record.amount), 0)
  const totalExpense = expenseRecords.reduce((sum, record) => sum + parseFloat(record.amount), 0)
  const netIncome = totalIncome - totalExpense

  return (
    <div className="bg-white shadow rounded-lg overflow-hidden">
      <div className="p-6">
        <h2 className="text-lg font-medium text-gray-900">财务概览</h2>
        <div className="mt-4">
          <div className="flex justify-between">
            <span className="text-gray-500">总收入:</span>
            <span className="font-semibold text-green-600">¥{totalIncome.toFixed(2)}</span>
          </div>
          <div className="flex justify-between mt-2">
            <span className="text-gray-500">总支出:</span>
            <span className="font-semibold text-red-600">¥{totalExpense.toFixed(2)}</span>
          </div>
          <div className="flex justify-between mt-2">
            <span className="text-gray-500">净收入:</span>
            <span className={`font-semibold ${netIncome >= 0 ? 'text-green-600' : 'text-red-600'}`}>
              ¥{netIncome.toFixed(2)}
            </span>
          </div>
        </div>
      </div>

      <IncomeExpenseDetails incomeRecords={incomeRecords} expenseRecords={expenseRecords} />
    </div>
  )
} 